<template>
	<view>
		<!--轮播-->
		<goodsbanner></goodsbanner>
		<!--商品信息-->
		<view class="goodsinfo">
			<!--价格-->
			<view class="price">
				<view class="small">￥</view>
				<view class="sale">{{sku.priceFee}}</view>
				<view class="small">.00</view>
			</view>

			<!--商品名称-->
			<view class="name">{{sku.skuName}}</view>

			<!--分享 收藏 -->
			<view class="fxsc">
				<view class="item">
					<image src="/static/share.png"></image>
					<view>分享</view>
				</view>

				<view class="item">
					<image src="/static/sc.png"></image>
					<view>收藏</view>
				</view>
			</view>
		</view>


		<!--底部-->
		<view class="btm">

			<view class="btm_item">
				<image src="../../static/dp.png"></image>
				<view>店铺</view>
			</view>

			<view class="btm_item">
				<image src="../../static/kf.png"></image>
				<view>客服</view>
			</view>

			<view class="btm_item" @click="look">
				<image src="../../static/uncart.png"></image>
				<view>购物车</view>
				<view class="cart-badge" v-if="cartCount > 0">{{ cartCount }}</view>
			</view>

			<view class="tocar" @click="tocar">加入购物车</view>
			<view class="tobuy">立即购买</view>

		</view>

		<!-- 普通弹窗 -->

		<JoinCar :visible="isShow" @close="isShow=false" :sku="sku" :goods="goods" 
				 @updateSku="upsku"
		  		 @refreshCartCount="fetchCartCount">
		</JoinCar>

	</view>
</template>

<script setup>
	import {ref} from 'vue'
	import {onLoad} from '@dcloudio/uni-app'
	import {queryDetail} from '@/api/goods.js'
	import {getItemNum} from '@/api/car.js'
	
	
	
	// 购物车商品数量
	const cartCount = ref(0);

	//声明同名引用 
	const popup = ref();

	//商品 对象
	const goods = ref({});
	const sku = ref({});
	

	//是否显示购物车
	const isShow = ref(false);


	//加入购物车
	function tocar() {
		isShow.value = true;
	}
	
	function upsku(newSku){
		sku.value=newSku;
	}
	
	// 查看购物车
	function look(){
		uni.switchTab({
			url:"/pages/car/car"
		})
	}

	//查询购
	async function init(id) {
		let res = await queryDetail(id);
		if (res.code == 200) {
			goods.value = res.data;
			//遍历sku 获取最低价格 
			let arr = res.data.skuList;
			if (arr) {
				arr.forEach(el => {
					if (sku.value.skuId) {
						//如果存在  比较当前el价格和sku的价格 
						if (el.priceFee < sku.value.priceFee) {
							sku.value = el;
						}
					} else {
						//不存在 第一次遍历 
						sku.value = el;
					}
				});
			}
		}
	}

	onLoad(data => {
		init(data.id);
		fetchCartCount();
	});
	
	//购物车上标数量
	async function fetchCartCount() {
	  try {
	    const res = await getItemNum();
	    if (res.code === 200) {
	      cartCount.value = res.data || 0;
		  console.log("sku数量：",cartCount.value)
	    }
	  } catch (err) {
	    console.error('获取购物车数量失败:', err);
	  }
	}
</script>

<style scoped>
	.goodsinfo {
		width: 750rpx;
		background-color: #fff;
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
	}

	.goodsinfo>view {
		width: 720rpx;
		margin: auto;
	}

	.price {
		color: #d81e06;
		display: flex;
		align-items: baseline;
		font-weight: bold;
		height: 100rpx;
		line-height: 100rpx;
		font-size: 18rpx;
	}

	.name {
		color: #000;
		font-weight: bold;
		font-size: 16px;
		line-height: 20px;
	}

	.sale {
		font-size: 24px;
	}

	.small {
		font-size: 12px;
	}

	.fxsc {
		display: flex;
		justify-content: space-between;
		height: 80rpx;

	}

	.item {
		display: flex;
		align-items: center;
	}

	.item image {
		width: 40rpx;
		height: 40rpx;
	}

	.item view {
		color: #888;
		font-size: 14px;
		margin-left: 3px;
	}

	.btm {
		position: fixed;
		left: 0;
		bottom: 0;
		height: 120rpx;
		width: 750rpx;
		background-color: #fff;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		display: flex;
		align-items: center;
	}

	.btm_item {
		width: 120rpx;
		height: 120rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: #666;
		font-size: 12px;
	}

	.btm_item image {
		width: 60rpx;
		height: 60rpx;
	}
	.btm_item {
	  position: relative;
	  width: 120rpx;
	  height: 120rpx;
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: center;
	  color: #666;
	  font-size: 12px;
	}

	.tocar {
		width: 185rpx;
		height: 65rpx;
		background-color: #d81e06;
		border-radius: 50px;
		color: #fff;
		line-height: 65rpx;
		font-size: 14px;
		text-align: center;
	}

	.tobuy {
		margin-left: 10rpx;
		width: 185rpx;
		height: 65rpx;
		background-color: #ffcd0d;
		border-radius: 50px;
		color: #fff;
		line-height: 65rpx;
		font-size: 14px;
		text-align: center;
	}
	
	.cart-badge {
	  position: absolute;
	  top: 5rpx;
	  right: 15rpx;
	  background-color: #ff3b30;
	  color: white;
	  border-radius: 50%;
	  width: 36rpx;
	  height: 36rpx;
	  font-size: 24rpx;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  transform: translateY(-10rpx);
	}
	
	
</style>
